<template>
  <el-button title="web下载" type="info" @click="openForm()" plain>e</el-button>
  <el-dialog v-model="isOpenWin" style="padding: 20px;" title="网页下载" width="500">
    <el-input v-model="weburl" style="width: 100%" placeholder="请输入页面url地址" suffix-icon="Download" />
    <el-button v-loading="loadingFlag" type="primary" @click="insertHtml"
      style="width: 100%;margin-top: 50px;margin-bottom: 50px;" plain>下载页面</el-button>
  </el-dialog>
</template>
<script setup lang="ts">
import { Editor } from "@tiptap/vue-3";
import { ref } from "vue";
import cupk2Request from '@/service/remoteRequests/Cupk2Request';
import { RequestTypeEnum } from "@/types/commons/RequestTypeEnum";
import type { DataResponse } from "@/types/commons/DataResponse";
import notice from '@/components/msg/CupkNotice';
const loadingFlag = ref(false);
const props = defineProps({
  editor: {
    type: Editor,
    required: true,
  }
});
const isOpenWin = ref(false);

const weburl = ref('');

const insertHtml = () => {
  if (weburl.value) {
    cupk2Request.submit('api/webpage', RequestTypeEnum.post, loadingFlag, { url: weburl.value, baseUrl: cupk2Request.getFullPath("") }, 60 * 1000)
      .then((response: DataResponse) => {
        props.editor!.chain().focus().insertContent(cupk2Request.initBasePathToHtml((response.data as { html: string }).html)).run();
        weburl.value = "";
        isOpenWin.value = false;
      }).catch((msg: string) => {
        notice.byError(msg);
      });
  }
}

const openForm = () => {
  isOpenWin.value = true;
}
const call = () => {
  openForm();
}

defineExpose({
  call,
});
</script>
<style scoped>
/* 样式可以根据需要添加 */
.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
}

.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
  border-color: #f4f4f5;
}

.editor-button-bar .el-dropdown {
  border: 0px solid #f4f4f5;
}
</style>
